<header>

    <!--<p class="text-center" style="background-color: gainsboro;">Please reload when switching to another UI example for proper rendering</p>-->

    <h1 class="text-center">

        <img src="../assets/logo.png" srcset="../assets/logo.png 1x, ../assets/logo@2x.png 2x" alt="Logo NG Dynamic Forms" />
        <span>NG Dynamic Forms Samples</span>

    </h1>

    <nav class="text-center">

        <a routerLink="/basic-sample-form">Basic UI</a>
        <a routerLink="/bootstrap-sample-form">Bootstrap UI</a>
        <a routerLink="/foundation-sample-form">Foundation UI</a>
        <a routerLink="/kendo-sample-form">Kendo UI</a>
        <a routerLink="/material-sample-form">Material UI</a>
        <a routerLink="/ng-bootstrap-sample-form">NG Bootstrap UI</a>
        <a routerLink="/primeng-sample-form">PrimeNG UI</a>
        <!--a routerLink="/async-sample-form">Async</a-->

    </nav>

</header>

<main>

    <h2 class="comp-h2" [ngStyle]="{'background-color': routeData.bgColor}">

        <span>{{routeData.title}}</span>

        <a class="float-right" title="View Source" [href]="routeData.href">
            <img src="../assets/logo-github.png"
                 srcset="../assets/logo-github.png 1x, ../assets/logo-github@2x.png 2x"
                 alt="Logo GitHub"/>
        </a>

    </h2>

    <router-outlet></router-outlet>

</main>